<template>
    <view :style="{ '--color': color, '--back-color': $common.hexToRgba(color, 0.1), '--newcolor': pageData.bg_color }">
        <view class="Wrapper">
            <status-bar :title="title" :backColor="backColor" :hideBg="hideBg" :statusHeight="statusHeight"></status-bar>

            <image :src="$imgUrls(pageData.top_img)" mode="widthFix" class="rows"></image>
            <view class="Box">
                <view class="SearchBox">
                    <view class="iconfont icon-btn_search color_99 size42 p-left20 p-right20"></view>
                    <input type="text" confirm-type="search" @confirm="Search" @input="Input" class="queryText" v-model="query_text" placeholder="输入内容搜索" />
                    <view class="searchBtn" @click="Search">搜索</view>
                </view>
            </view>

            <u-sticky :customNavHeight="totalHeight">
                <view class="tabsBox">
                    <u-tabs :list="listTab" @click="click" :itemStyle="itemStyle" lineColor="transparent" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
                </view>
            </u-sticky>

            <view class="List" v-for="(item, index) in classData" :key="item.id">
                <view class="row j-sb a-center">
                    <text class="title">{{ item.name }}</text>
                    <view class="more" @click="toUrl(`/weiDian/List?classify_id=${item.id}`)">
                        <text class="size26">更多</text>
                        <view class="iconfont icon-a-zujian32 h7 m-left4"></view>
                    </view>
                </view>
                <image :src="$imgUrls(item.photo)" mode="widthFix" class="itemImg" v-if="item.photo"></image>
                <view class="listbox">
                    <view class="lilin" v-for="(sub, sin) in item.pageData" :key="sub.goods_id">
                        <!-- <view class="popCenter" @click="toShop(sub)"></view> -->
                        <store-product
                            class="store-product"
                            v-if="sub.buy_verification == 0"
                            :product-id="sub.product_id"
                            :appid="sub.shop_appid"
                            :product-promotion-link="sub.upTeamData.promotion_link"
                        ></store-product>
                        <view class="popCenter" v-else @click="toShop(sub)"></view>
                        <image :src="$imgUrls(sub.img)" mode="aspectFill" class="Img"></image>
                        <text class="title ellipsis_2">{{ sub.name }}</text>
                        <view class="color_ff4 Price">
                            <view class="size24">￥</view>
                            <text class="size36 bold">{{ sub.price }}</text>
                        </view>
                        <text class="brokerage" v-if="sub.profitTitle">{{ sub.profitTitle }}</text>
                    </view>
                </view>
            </view>

            <view class="row j-centert p-top100" v-if="!classData.length">
                <view class="iconfont icon-meiyoushuju size200 white"></view>
            </view>
        </view>

        <showModel @cancelFunc="cancelFunc" goHome="0" v-if="showModal" type="2" @showMol="showModal = true"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                showModal: false,
                id: 4985,
                classify_cate: 6,
                subId: 0,
                title: ' ',
                backColor: true,
                hideBg: 1,
                statusHeight: true,
                query_text: '',
                listTab: [],
                classData: [],
                classify_id: '',
                page: 1,
                limit: 3,
                pageData: ''
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            if (opt.classify_cate) this.classify_cate = opt.classify_cate;
            this.getClassifyInfo();
        },
        async onShow() {
            await Api.getUserBindInfo();
        },
        methods: {
            getClassifyInfo() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getClassifyInfo',
                        data: {
                            classify_cate: this.classify_cate,
                            id: this.id,
                            is_again: 0
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.Data;
                        this.listTab = result.list;
                        this.pageData = result;
                        if (!result.list) return (this.classData = []);
                        this.subId = result.list[0].id;
                        this.SubgetClassifyInfo();
                    });
            },
            SubgetClassifyInfo() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getClassifyInfo',
                        data: {
                            classify_cate: this.classify_cate,
                            id: this.subId,
                            is_again: 1,
                            query_text: this.query_text
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.Data.list || [];

                        result.forEach((item) => {
                            item.pageData = [];
                        });
                        this.classData = result;
                        if (!result.length) return;
                        this.classData.forEach((item) => {
                            this.getClassifyGoodsList(item.id);
                        });
                    });
            },

            getClassifyGoodsList(classify_id) {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getClassifyGoodsList',
                        data: {
                            classify_id,
                            page: this.page,
                            limit: this.limit,
                            query_text: this.query_text
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        const findIndex = this.classData.findIndex((n) => n.id == classify_id);
                        this.classData[findIndex].pageData = result;
                    });
            },

            async toShop() {
                if (!this.vid) return (this.showModal = true);
                const reuslt = await this.$Modals('您还未授权成为推客', '授权成为推客后才可购买');
                if (reuslt) this.Business();
            },
            Business() {
                if (!this.openBusinessView.businessType) {
                    console.log('businessType为空');
                    this.$Toast('未获取到正确的商家信息');
                    return;
                }
                this.$pop.openBusinessView(this.openBusinessView.businessType, this.openBusinessView.queryString, this.extraData);
            },
            Input(event) {
                let value = event.detail.value;
                if (!value) this.Search();
            },
            Search() {
                this.page = 1;
                this.SubgetClassifyInfo();
            },
            click(e) {
                this.classData = [];
                this.page = 1;
                this.subId = e.id;
                this.SubgetClassifyInfo();
            },
            async cancelFunc() {
                this.showModal = false;
                await Api.getUserBindInfo();
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'System', 'navHeight', 'navWidth', 'vid', 'openBusinessView', 'extraData']),
            itemStyle() {
                return {
                    padding: '16rpx 10rpx'
                };
            },
            activeStyle() {
                return {
                    fontSize: '30rpx',
                    color: '#ffffff',
                    padding: '12rpx 36rpx',
                    backgroundColor: this.color,
                    borderRadius: '40rpx',
                    fontWeight: 500
                };
            },
            inactiveStyle() {
                return {
                    fontSize: '30rpx',
                    padding: '12rpx 36rpx',
                    color: '#ffffff',
                    backgroundColor: '#282018',
                    borderRadius: '30rpx'
                };
            }
        },
        onPageScroll(e) {
            let scrollTop = e.scrollTop;
            if (scrollTop >= 200) {
                this.backColor = false;
                this.hideBg = 0;
                this.title = this.pageData.title;
            } else {
                this.backColor = true;
                this.hideBg = 1;
                this.title = ' ';
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 100%;
        min-height: 100vh;
        padding-bottom: 30rpx;
        background-color: var(--newcolor);
    }
    .Box {
        width: 100%;

        position: relative;
        z-index: 10;

        .SearchBox {
            width: 710rpx;
            height: 88rpx;
            background-color: #fff;
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            margin: 0 auto;
            .queryText {
                flex: 1;
                height: 100%;
                font-size: 30rpx;
                color: #000;
            }
            .searchBtn {
                width: 120rpx;
                height: 75%;
                background-color: var(--color);
                font-size: 32rpx;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }
        }
    }

    .tabsBox {
        width: 100%;
        height: 100rpx;
        position: relative;
        z-index: 10;
        margin-top: 20rpx;
        background-color: var(--newcolor);
        ::v-deep .u-tabs__wrapper__nav {
            padding-left: 16rpx;
        }
    }

    .List {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx;
        .title {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
        }
        .more {
            display: flex;
            align-items: center;
            padding: 8rpx 24rpx;
            background-color: #333;
            color: #fff;
            border-radius: 30rpx;
        }
        .itemImg {
            width: 100%;
            border-radius: 10rpx;
            margin-top: 24rpx;
        }
        .listbox {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            row-gap: 24rpx;
            column-gap: 10rpx;
            margin-top: 30rpx;

            .lilin {
                display: flex;
                flex-direction: column;
                position: relative;
                .store-product,
                .popCenter {
                    width: 100%;
                    height: 86%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: #fff;
                    z-index: 11;
                    opacity: 0;
                }
                .Img {
                    width: 100%;
                    height: 240rpx;
                    border-radius: 10rpx;
                }
                .title {
                    color: #000;
                    font-size: 28rpx;
                    font-weight: 500;
                    margin-top: 10rpx;
                }
                .Price {
                    display: flex;
                    align-items: center;
                    margin-top: 10rpx;
                }
                .brokerage {
                    color: #b89365;
                    font-size: 24rpx;
                    margin-top: 8rpx;
                }
            }
        }
    }
</style>
